var BillMaterialApproval = function () {
  var BillMaterialApprovalTable = function () {
    var template = /*html*/ `
      <div class="bill-material-approval-table">
        <div class="material-approval-title">{{title}}</div>
        <div class="material-approval-table-div">
          <el-table fit stripe border :data="materialList" style="width:100%" height="parent" :row-class-name="getRowClassName" :cell-class-name="getCellClassName">
            <el-table-column :resizable="false" prop="materialCode" label="物料代码" :auto-width="true" min-width="70px" header-align="center" key="materialCode">
            </el-table-column>
            <el-table-column :resizable="false" prop="materialType" label="物料类型" min-width="80px" header-align="center" key="materialType">
            </el-table-column>
            <el-table-column :resizable="false" prop="lineNo" label="订单序号" min-width="75px" align="center" key="lineNo">
              <template slot-scope="scope">
                <span>{{scope.row.lineNo==='-1'?0:scope.row.lineNo}}</span>
              </template>
            </el-table-column>
            <el-table-column :resizable="false" prop="materialName" label="物料名称" :auto-width="true" min-width="70px" header-align="center" key="materialName">
            </el-table-column>
            <el-table-column :resizable="false" prop="materialModel" label="规格型号" :auto-width="true" min-width="70px" header-align="center" key="materialModel">
            </el-table-column>
            <el-table-column :resizable="false" prop="color" label="编号" :auto-width="true" min-width="60px" header-align="center" key="color"></el-table-column>
            <el-table-column :resizable="false" prop="colorDescription" label="描述" :auto-width="true" min-width="70px" header-align="center" key="colorDescription">
            </el-table-column>
            <el-table-column :resizable="false" prop="materialDeptName" label="物料部门" min-width="120px" align="center" key="materialDeptName">
            </el-table-column>
            <el-table-column :resizable="false" prop="materialFactory" label="仓位" min-width="75px" header-align="center" key="materialFactory">
              <template slot-scope="scope">
                {{warehouseList[scope.row.materialFactory]}}
              </template>
            </el-table-column>
            <el-table-column :resizable="false" prop="feedTotal" label="投料数" min-width="100px" align="center" key="feedTotal">
            </el-table-column>
            <el-table-column :resizable="false" prop="yltsTotal" label="用料条数" min-width="100px" align="center" key="yltsTotal">
            </el-table-column>
            <el-table-column :resizable="false" prop="orderTotal" label="订单数" min-width="80px" align="center" key="orderTotal">
            </el-table-column>
          </el-table>
        </div>
      </div>
    `;

    return {
      props: {
        materialList: {
          type: Array,
          required: true
        },

        oldMaterialList: Array,

        title: {
          type: String,
          default: ''
        },

        mode: {
          type: String,
          default: 'old'
        }
      },

      mixins: [TableScrollEventMixin('material-approval-table-div')],

      data: function () {
        return {
          warehouseList: {
            "1": "原材料仓",
            "2": "辅料仓"
          }
        };
      },

      methods: {
        getRowClassName: function (option) {
          var mode = this.mode;
          if (mode !== 'new') {
            return;
          }
          var material = option.row;
          var type = material.type;
          var className;
          if (type === 1) {
            className = 'mode-add';
          } else if (type === 2) {
            className = 'mode-delete';
          }
          return className;
        },

        getCellClassName: function (option) {
          var mode = this.mode;
          if (mode !== 'new') {
            return;
          }

          var row = option.row;
          if (row.type !== 1) {
            return;
          }

          var oldMaterialList = this.oldMaterialList;
          var oldMaterial = _.find(oldMaterialList, {
            id: row.id
          });
          if (oldMaterial === undefined) {
            return;
          }

          var column = option.column;
          var property = column.property;
          if (row[property] === oldMaterial[property]) {
            return;
          }
          return 'update-cell';
        }
      },

      template: template
    };
  }();

  var template = /*html*/ `
    <div class="bill-material-approval" v-loading.fullscreen.lock="loading">
      <div class="bill-material-info">
        <template v-if="newMaterialList!==null">
          <div class="bill-material-info-content" data-dir="left">
            <bill-material-approval-table ref="oldMaterialTable" title="原订单物料" :material-list="materialList" mode="old" @scroll="tableScroll">
            </bill-material-approval-table>
          </div>
          <div class="line"></div>
          <div class="bill-material-info-content" data-dir="right">
            <bill-material-approval-table ref="newMaterialTable" title="修改后订单物料" :material-list="newMaterialList" :old-material-list="materialList" 
              mode="new" @scroll="tableScroll">
            </bill-material-approval-table>
          </div>
        </template>
      </div>
      <div class="bill-material-btns">
        <el-button size="small" type="primary" @click="approvalMaterial(1)">审核通过</el-button>
        <el-button size="small" type="danger" @click="approvalMaterial(2)">审核不通过</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      materialList: {
        type: Array,
        required: true
      },
      order: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        newMaterialList: null,
        timeout: null
      };
    },

    created: function () {
      this.initData();
    },

    methods: {
      initData: function () {
        var order = this.order;
        this.loading = true;
        var self = this;
        ajaxRequest('feedOrder/getOrderInfoDetailApply', {
          orderNo: order.orderId
        }).then(function (materialList) {
          self.loading = false;
          self.newMaterialList = self.getNewData(materialList);
        }).catch(function () {
          self.loading = false;
        });
      },

      getNewData: function (updateMaterialList) {
        var updateMaterialObj = {};
        for (var i = 0; i < updateMaterialList.length; i++) {
          var updateMaterial = updateMaterialList[i];
          updateMaterialObj[updateMaterial.id] = updateMaterial;
        }

        var materialList = this.materialList;
        materialList = _.map(materialList, function (material) {
          var updateMaterial = updateMaterialObj[material.id];
          if (updateMaterial !== undefined) {
            material = new BillMaterialModel(updateMaterial);
            material.type = 1;
          }
          return material;
        });

        return materialList;
      },

      tableScroll: function (pos, mode) {
        if (mode === 'old') {
          mode = 'new';
        } else {
          mode = 'old';
        }
        var tableRef = this.$refs[`${mode}MaterialTable`];
        if (tableRef !== undefined) {
          tableRef.setScroll(pos);
        }
      },

      approvalMaterial: function (status) {
        var materialList = this.materialList,
          order = this.order;
        materialList = _.filter(materialList, function (obj) {
          return [1, 2].indexOf(obj.type) !== -1;
        });

        materialList = _.map(materialList, function (material) {
          return {
            id: material.id,
            type: material.type
          }
        });
        this.loading = true;
        var self = this;
        ajaxRequest('feedOrder/approvalOrderInfoDetail', {
          orderInfoDetailList: JSON.stringify(materialList),
          isBom: order.isBom,
          status: status
        }).then(function () {
          self.loading = false;
          var msg = status === 1 ? "通过" : "不通过";
          msg = `该订单审核${msg}`;
          self.$alert(msg, '信息', {
            callback: function () {
              self.$emit('approval-success', status);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      BillMaterialApprovalTable: BillMaterialApprovalTable
    },

    template: template
  };
}();